<template>
	<div>
		<div class="head">
			<div @click="$router.push({path: '/My'})" class="return"></div>
			分享注册
		</div>
		<div class="overlay">
			<div class="overlay-content">
				<div class="expand-invite" align="center">
					<div style="width: 260px;height: 240px;background-color: #344b7d;padding-top: 20px;">
						<div class="qcode">
							<qriously :value="url" :size="200" />
						</div>
					</div>
					<div>
						<div id="copyText" v-text="url" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
					</div>
					<div>
						<div id="copyText2" v-text="inviteCode" style="color: transparent;background-color: transparent;position: absolute;z-index: 0;-webkit-user-select: text;word-wrap: break-word;width: 80%;"></div>
					</div>
					<div class="invite-copy">
						<div class="copyText">
							<span>邀请码:</span>
							<span v-text="inviteCode"></span>
						</div>
						<x-button class="copyBtn copyBtn-Orange" @click.native="copyLink2" style="background-color: #1fa078;">复制邀请码</x-button>
					</div>
					<div align="center" style="padding: 20px 20px 10px;">
						<div style="word-wrap: break-word;padding: 20px 20px 10px;display: none;" v-text="url"></div>
						<x-button class="copyBtn copyBtn-Orange" @click.native="copyLink" style="background-color: #1fa078;">复制邀请链接</x-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'Invite',
		data() {
			return {
				imgUrl: '',
				url: '',
				codes: '',
				inviteCode: ''
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getSharing();
		},
		methods: {
			getSharing() {
				this.inviteCode = this.$route.query.invite;
				this.url = process.env.API_HOST + 'registered?id=' + this.inviteCode;
			},
			copyLink() { //复制邀请链接
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$vux.toast.text('复制成功', 'middle');
					} catch(err) {
						_this.$vux.toast.text('复制失败', 'middle');
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$vux.toast.text('复制成功', 'middle');
				}
			},
			copyLink2() { //复制邀请马
				let sUserAgent = navigator.userAgent.toLowerCase();
				let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				window.getSelection().removeAllRanges();
				if(bIsIpad || bIsIphoneOs) {
					var copyDOM = document.querySelector('#copyText2'); //要复制文字的节点
					var range = document.createRange();
					// 选中需要复制的节点
					range.selectNode(copyDOM);
					// 执行选中元素
					window.getSelection().addRange(range);
					// 执行 copy 操作
					var successful = document.execCommand('copy');
					try {
						var msg = successful ? 'successful' : 'unsuccessful';
						_this.$vux.toast.text('复制成功', 'middle');
					} catch(err) {
						_this.$vux.toast.text('复制失败', 'middle');
					}
					// 移除选中的元素
					window.getSelection().removeAllRanges();
				} else {
					const Url2 = document.getElementById("copyText2").innerText;
					const oInput = document.createElement('input');
					oInput.value = Url2;
					document.body.appendChild(oInput);
					oInput.select(); // 选择对象
					document.execCommand("Copy"); // 执行浏览器复制命令
					oInput.className = 'oInput';
					oInput.style.display = 'none';
					_this.$vux.toast.text('复制成功', 'middle');
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.copyText {
		text-align: center;
		font-size: 20px;
		padding: 10px 25px;
	}
	
	.copyBtn {
		width: 210px;
		background: #3966e8;
		color: #FFFFFF !important;
	}
	
	.copyBtn-Orange {
		background: #e88036;
	}
	
	.overlay {
		padding-top: 40px;
	}
	
	.head~.overlay {
		top: 45px;
	}
	
	.qcode {
		width: 220px;
		height: 220px;
		background-color: #FFFFFF;
	}
	
	.qcode div {
		padding-top: 10px;
	}
</style>